<template>
  <el-container class="main_con">
    <!-- <div ref="copyDom"> -->
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has type="primary" size="medium" @click="addItem">新增优惠券</el-button></div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.name" placeholder="优惠券名字" style="width:300px"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>

    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <el-table-column prop="name" label="优惠券名称"></el-table-column>
        <el-table-column label="优惠内容" width="250px">
          <template slot-scope="scope">
            满{{ scope.row.conditions }}减{{ scope.row.denomination }}
          </template>
        </el-table-column>
        <el-table-column label="发放总量" width="180px">
          <template slot-scope="scope">
            {{ scope.row.total_limit_type == 0 ? '不限制' : scope.row.total_limit }}
          </template>
        </el-table-column>
        <el-table-column label="已领取" prop="used"></el-table-column>
        <el-table-column label="领取方式" prop="get_type">
          <template slot-scope="scope">
            <span v-if="scope.row.get_type == 0">领券中心</span>
            <span v-if="scope.row.get_type == 1">链接领取</span>
            <span v-if="scope.row.get_type == 2">活动领取</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">未开始</span>
            <span v-if="scope.row.status == 1">开始中</span>
            <span v-if="scope.row.status == 2">领完</span>
          </template>
        </el-table-column>
        <el-table-column label="显示/隐藏">
          <template slot-scope="scope">
            <span v-if="scope.row.is_show == 0">隐藏</span>
            <span v-if="scope.row.is_show == 1">显示</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="180px"></el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button v-has type="text" v-show="scope.row.status == 0 && scope.row.audit == 1" @click="udItem(scope.row)">激活</el-button>
            <el-button v-has type="text" v-show="scope.row.status == 1 && scope.row.audit == 1" @click="udItem(scope.row)">暂停</el-button>
            <el-button v-has type="text" v-show="scope.row.is_show == 0 && scope.row.audit == 1" @click="showItem(scope.row)">显示</el-button>
            <el-button v-has type="text" v-show="scope.row.is_show == 1 && scope.row.audit == 1" @click="showItem(scope.row)">隐藏</el-button>

            <el-button v-has type="text" @click="editItem(scope.row.id)">编辑</el-button>
            <el-button v-if="scope.row.status == 1 && scope.row.audit == 1 && urlType == 'mall'" v-has type="text" @click="sendUser(scope.row.id)">发送</el-button>
            <el-button v-has type="text" @click="opdialog(scope.row.id)">领取记录</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="justify-content: flex-end;" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog title="选择用户" :visible.sync="showUserSelect" width="50%" destroy-on-close @closed="closeSelect">
      <div class="user_list">
        <div class="title" v-if="users.length > 0">已选择用户：</div>
        <div class="selected" v-if="users.length > 0">
          <div class="user_item" v-for="(item, i) in users" :key="i">
            {{ item.nickname }}&nbsp;
            <i class="el-icon-close" @click="removeUser(i)"></i>
          </div>
        </div>
        <div class="btn" v-if="users.length > 0"><el-button type="primary" size="small" @click="sendTicket">点击发送优惠券</el-button></div>
        <div class="selector"><selectUser ref="selectuser" @outData='outData' :hidden="false" :data="users"></selectUser></div>
      </div>
    </el-dialog>
    <el-dialog title="优惠券领取情况" :visible.sync="showUserget" width="50%" destroy-on-close>
      <el-table :data="get_list">
        <el-table-column label="用户">
          <template slot-scope="scope">
            <div class="product-item" v-if="scope.row.user">
              <vimage :src="scope.row.user.picurl" style="border-radius:50%;"></vimage>
              <span>{{ scope.row.user.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="优惠券">
          <template slot-scope="scope">
            <span>{{ scope.row.coupon.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status_text">
          <!--    <template slot-scope="scope">
            <span v-if="scope.row.status == 0">未开始</span>
            <span v-if="scope.row.status == 1">开始中</span>
            <span v-if="scope.row.status == 2">领完</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="create_time" label="领取时间"></el-table-column>
        <el-table-column prop="update_time" label="使用时间">
          <template slot-scope="scope">
            <span>{{ scope.row.status_text == '已使用' ? scope.row.update_time : '--' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="justify-content: flex-end;" v-show="get_total != 0">
        <el-pagination @current-change="changePage_get" class="pages" background hide-on-single-page layout="prev, pager, next" :total="get_total"></el-pagination>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {delCoupon, editCoupon, getCouponList, sendCoupon, getuserCouponList, getMadminCouponList} from '@/api/shop/marketing';
import {logintype_byurl} from '@/utils/auth';
import sendToUser from './components/sendToUser';
import selectUser from '@/components/SelectUser/index';
export default {
  data() {
    return {
      showUserSelect: false,
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '未开始'
        },
        {
          value: 1,
          label: '开始中'
        },
        {
          value: 2,
          label: '领完'
        }
      ],
      obj: {
        name: '',
        status: -1
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      get_list: [],
      get_page: 1,
      get_total: 0,
      isLoading: false,
      list: [],
      currentTicket: '',
      users: [],
      showUserget: false,
      urlType: 'shop'
    };
  },
  components: {
    sendToUser,
    selectUser
  },
  mounted() {
    this.urlType = logintype_byurl();
    this.searchList();
  },
  methods: {
    //选择用户关闭回调
    closeSelect() {
      //清空选择用户数组
      this.users = [];
    },
    //发送优惠券
    sendTicket() {
      if (this.currentTicket) {
        //拼接用户id
        let uid = '';
        this.users.forEach(e => {
          uid += e.id + ',';
        });
        uid = uid.substring(0, uid.length - 1);

        this.$confirm('是否要给该 ' + this.users.length + ' 位用户发送优惠券?')
          .then(res => {
            let o = {
              id: this.currentTicket,
              userList: uid
            };

            sendCoupon(o)
              .then(res => {
                this.showUserSelect = false;
              })
              .catch(e => {
                //empty
              });
          })
          .catch(e => {
            //empty
          });
      }
    },
    //删除选择用户
    removeUser(i) {
      this.users.splice(i, 1);
    },
    //选择发送用户
    sendUser(ticket) {
      this.currentTicket = ticket;
      this.users=[]
      this.showUserSelect = true;
      this.$nextTick(() => {
        this.$refs.selectuser.initdata();
      });

    },
    outData(data){
      console.log(data)
    },
    //新增记录
    addItem() {
      //导航到新页面
      this.$router.push('/coupon/item');
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = {...this.obj};
      //删除字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      if (this.urlType == 'mall') {
        getCouponList(this.objTemp, this.page, this.size).then(res => {
          console.log(res);
          this.isLoading = false;
          let o = res.msg.data;
          this.list = [];
          o.forEach(item => {
            if (item.audit == 1) {
              this.list.push(item);
            }
          });
          this.total = res.msg.total;
        });
      } else if (this.urlType == 'shop') {
        getCouponList(this.objTemp, this.page, this.size).then(res => {
          console.log(res);
          this.isLoading = false;
          let o = res.msg.data;
          this.list = [];
          o.forEach(item => {
            if (item.audit == 1) {
              this.list.push(item);
            }
          });
          this.total = res.msg.total;
        });
      }
    },
    //启动/暂停优惠券
    udItem(item) {
      let s = '',
        o = {
          id: item.id,
          update_time: item.update_time
        };
      if (item.status == 0) {
        //启动
        s = '是否激活该优惠券?';
        o.status = 1;
      } else if (item.status == 1) {
        //暂停
        s = '是否暂停该优惠券?';
        o.status = 0;
      }

      this.$confirm(s)
        .then(_ => {
          this.isLoading = true;
          editCoupon(o)
            .then(res => {
              this.isLoading = false;
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(ie => {
          //empty
        });
    },
    showItem(item) {
      let s = '',
        o = {
          id: item.id,
          update_time: item.update_time
        };
      if (item.is_show == 0) {
        //启动
        s = '是否显示该优惠券?';
        o.is_show = 1;
      } else if (item.is_show == 1) {
        //暂停
        s = '是否隐藏该优惠券?';
        o.is_show = 0;
      }

      this.$confirm(s)
        .then(_ => {
          this.isLoading = true;
          editCoupon(o)
            .then(res => {
              this.isLoading = false;
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(ie => {
          //empty
        });
    },
    //编辑数据
    editItem(id) {
      this.$router.push({
        path: '/coupon/item',
        query: {id: id, k: Math.random()}
      });
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据？')
        .then(_ => {
          this.isLoading = true;
          delCoupon(id)
            .then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(_ => {
          //出错
        });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.searchList();
    },
    changePage_get(page) {
      this.get_page = page;
      this.getuserCouponList();
    },
    //打开领取列表
    opdialog(coupon_id) {
      this.coupon_id = coupon_id;

      this.getuserCouponList();
      this.get_page = 1;
      this.get_list = [];
      this.get_total = 0;
    },
    //用户领取列表
    getuserCouponList() {
      let data = {
        coupon_id: this.coupon_id
      };
      getuserCouponList(data, this.get_page, 10).then(res => {
        let o = res.msg;
        this.get_list = o.data;
        this.get_total = o.total;
        this.showUserget = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}

.user_list {
  .title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .selected {
    display: flex;
    flex-wrap: wrap;
    max-height: 150px;
    overflow-y: auto;

    .user_item {
      padding: 0 10px;
      font-size: 12px;
      height: 28px;
      line-height: 28px;
      border: 1px solid #dcdfe6;
      margin: 0 10px 10px 0;
      border-radius: 5px;
      flex-shrink: 0;

      i {
        cursor: pointer;
        font-size: 16px !important;
      }
    }
  }

  .btn {
    margin-bottom: 10px;
  }
}
</style>
